<template>
    <div>
        <div class="danmu-wrap">
            <div class="danmu-item" v-for="(item) in showingBullets" :key="item.id" :data-line="item.line"
                :style="Object.assign({ '--line': item.line }, item.style ? item.style : {})">
                {{ item.name }}
            </div>
        </div>
        <div class="input-wrap">
            <input type="text" v-model.trim="newBullet" maxlength='12' placeholder='来说点什么' @keyup.enter="addBullet" />
            <button @click="addBullet">发送</button>
        </div>
    </div>
</template>
<script lang="ts" setup name="AgDanmu">
import { ref, onMounted, onUnmounted } from 'vue';
// 长安行天下，明天更美好!

const getUUID = () => Math.random() + Math.random();
// 将要显示的弹幕队列
const waitBullets = ref([
    { id: getUUID(), name: "一场说走就走的旅行", line: 1 },
    { id: getUUID(), name: "结束单身汪", line: 2 },
    { id: getUUID(), name: "明年暴瘦10斤", line: 3 },
    { id: getUUID(), name: "多陪伴父母", line: 4 },
    { id: getUUID(), name: "赚到1个亿,买别墅", line: 5 }
]);
const showingBullets = ref([{
    id:0,
    line:"",
    style:"",
    name:""
}]);
const lines = ref(5);
const currentLine = ref(1);
let timer: any = null;
onMounted(() => {
    
    // 1. 开启定时器，每隔一秒钟，从等待集合里取出一个弹幕，放进显示集合里
    showNextBullet();
    timer = setInterval(showNextBullet, 700);
});
onUnmounted(() => {
    clearInterval(timer);
});

const showNextBullet = () => {
    if (!waitBullets.value.length) {
        return;
    }
    // 先确定弹道，跟上一个弹道错开即可
    currentLine.value = (currentLine.value % lines.value) + 1;
    // 从等待集合里取出第一个
    const currentBullet:any = waitBullets.value.shift();
    // 设置弹幕的弹道
    currentBullet.line = currentLine.value;
    // 弹幕放进显示集合里，弹幕开始滚动
    showingBullets.value.push(currentBullet);
    
}
const newBullet = ref("")
const addBullet = () => {
    if (!newBullet.value) { return; }
    const newBulletObj = { id: getUUID(), name: newBullet.value, line: 0, style: { color: 'red' } };
    waitBullets.value.push(newBulletObj);
    newBullet.value = "";
}
// const initCss=()=>{
//     // 获取元素和其父元素
// let element = document.querySelector('.danmu-item');
// let parent = element!.parentElement;

// // 获取父元素的宽度
// let parentWidth = parent!.offsetWidth;

// // 创建一个新的样式表
// let styleSheet = document.createElement('style');
// document.head.appendChild(styleSheet);

// // 插入新的@keyframes规则
// styleSheet!.sheet!.insertRule(`
//     @keyframes rightToLeft {
//         0% {
           
//             transform: translateX(100%);
//         }
//         100% {
//             transform: translateX(${parentWidth}px);
//         }
//     }
// `, styleSheet!.sheet!.cssRules.length);

// // 设置元素的动画
// (element as any).style.animation = 'rightToLeft 2s';
// }
</script>
<style lang="scss" scoped>
.danmu-wrap {
    height: 375px;
    background-color: #eee;
    position: relative;

    // overflow: hidden;
    .danmu-item {
        // width: 100%;
        position: absolute;
        // transform: translateX(-100%); // 文字在左边边屏幕外
        // transform: translateX(100vw); // 文字在右边屏幕外
        animation: rightToLeft 7s linear infinite forwards; // both
        // infinite 和 both 控制的是动画的两个不同的方面：infinite 控制动画的重复次数，both 控制动画在播放前后的样式。
        right: 0;
    }

    // 从右往左
    @keyframes rightToLeft {

        0% {
            // transform: translate(100vw);
            // transform: translateX(100%);
            transform: translateX(100%);
            // transform: translateX(100%); 是 CSS 的一个属性，用于改变元素的位置。

// translateX 是 transform 属性的一种函数，它会沿着 X 轴移动元素。translateX(100%) 会将元素向右移动其自身宽度的 100%。例如，如果元素的宽度为 200px，那么 translateX(100%) 会将元素向右移动 200px。
        }

        // 99% {
        //     transform: translateX(calc(-100% - 100vw));
        // }

        // 这样到了容器最左边还会往左知道视口的边界
        100% {
            // transform: translateX(calc(-100% - 100vw)); // 本身的宽度 + 视口的宽度的负值：即往左那么多
            transform: translateX(- 100vw);
        }
    }

    // .danmu-item[data-line="1"] {
    //     top: 0;
    // }

    // .danmu-item[data-line="2"] {
    //     top: 75px;
    // }

    // .danmu-item[data-line="3"] {
    //     top: 150px;
    // }

    // .danmu-item[data-line="4"] {
    //     top: 225px;
    // }

    // .danmu-item[data-line="5"] {
    //     top: 300px;
    // }
    .danmu-item[data-line] {
        top: calc((var(--line) - 1) * 75px + 3px);
    }
}
</style>